<template>
  <div class="app-box" v-title data-title="小通币咚" id="guide-box" :style="{}">
    <!-- <img id="guide_background" src="../assets/guide_background.png" />
 -->
    <section :style="{bottom:CellFromTop+'px'}">
      <group>
        <x-input type="tel" :max="11" title="" v-model="form.mobile" :show-clear="false" placeholder="请输入本人常用手机号"></x-input>
        <img class="yzmimg" :src="imgSrc" @click="getpicImage">
        <!--       <img class="yzmimg" src="%3D%3D" @click="changeImg"> -->
        <x-input :max="4" title="" v-model="form.agentCode" :show-clear="false" placeholder="请输入验证码"></x-input>
        <x-button @click.native="getyanma" :disabled="dxdisabled" class="dx-button" mini type="primary">{{dxmsg}}</x-button>
        <x-input type="tel" :max="6" title="" v-model="form.vercode" :show-clear="false" placeholder="请输入短信验证码"></x-input>
        <img class="eyeimg" :src="eyeSrc" @click="changeEyeType">
        <x-input title="" :type="eyeType" :max=16 v-model="form.password" :show-clear="false" placeholder="请输入登录密码,6-16位数字和字母"></x-input>
      </group>
      <div style="margin: 5px 0 15px 0">
        <check-icon :value.sync="checkValue"> 阅读并同意</check-icon>
        <router-link to="/registrationagreement">《注册协议》</router-link>和
        <router-link to="/compensatoryagreement">《服务协议》</router-link>
      </div>
      <x-button type="primary" @click.native="nextPage" style="border-radius:20px;">体验小通币咚，立即申请</x-button>
      <x-button plain type="primary" @click.native="download" style="border-radius:20px;">下载APP</x-button>
      <!--       <a href="https://itunes.apple.com/cn/app/%E5%B0%8F%E9%80%9A%E5%B8%81%E5%92%9A/id1303624175?mt=8">下载</a> -->
    </section>
  </div>
</template>
<script>
import { CellFormPreview, Group, XInput, Flexbox, FlexboxItem, CheckIcon, XButton, Alert } from 'vux'
import { getimages, yanzhenimage, getsendMsg, registMember } from '@/api/guide'

export default {
  components: {
    CellFormPreview,
    Group,
    XInput,
    Flexbox,
    FlexboxItem,
    CheckIcon,
    XButton,
    Alert
  },
  data() {
    return {
      dxdisabled: false,
      dxmsg: '获取验证码',
      CellFromTop: 12,
      imgSrc: '',
      checkValue: false,
      form: {
        mobile: '',
        password: '',
        type: '02',
        agentCode: '',
        vercode: '',
        status: '00',
        popCode: this.$route.query.popCode,
        createLgt: '',
        createLat: '',
      },
      list: [{
        label: 'Apple',
        value: '3.29'
      }, {
        label: 'Banana',
        value: '1.04'
      }, {
        label: 'Fish',
        value: '8.00'
      }],
      browser: {},
      eyeType: 'password',
      eyeSrc: '/static/img/eye-close.png'
    }
  },

  created() {
    this.getpicImage()
    //   this.changeImg()

  },

  methods: {
    // 注册
    nextPage() {
      debugger
      var yzval = this.yanzheng()
      console.log("yzval..................", yzval)
      if (!yzval) {
        registMember({ token: this.$route.query.token }, this.form).then(gndata => {
          debugger
          var msgcontent = '注册失败'
          if (gndata.data.code === '000000') {
            msgcontent = '恭喜您注册成功,快去下载app登录吧!'
          } else {
            if (gndata.data.msg) {
              msgcontent = gndata.data.msg
            }
            this.$vux.alert.show({
              title: '提示',
              content: msgcontent
            })
          }
        }).catch(error => {
          console.log("next error-----------")
          console.dir(error)
        })
      }
      /* window.location.href = 'https://api.allinpaycard.com/api/user/wxRegister.htm?loginName=' + this.form.mobile + '&password=' + this.form.password + '&type=register&vcode=' + this.form.vercode + '&agentCode=' + this.form.agentCode }
       */
    },

    // 获取短信验证码
    getyanma() {
      var yzval = this.yanzheng2()
      console.log("yzval..................", yzval)
      if (!yzval) {
        getsendMsg({ mobile: this.form.mobile, token: this.$route.query.token, type: '02' }).then(gndata => {
          debugger
          this.countDown()
          console.log("getsendMsg--------------")
          console.dir(getsendMsg)
          if (gndata.code === '000000') {
            this.$vux.alert.show({
              title: '提示',
              content: '验证码已经发送'
            })
          }
        }).catch(error => {
          console.log("next error-----------")
          console.dir(error)
        })
      }
    },
    // 取图片
    getpicImage() { //https://mtransfer.ulinkcredit.com/openapi/     //生产环境    // http://openapi.allinpaycard.cn/
      this.imgSrc = 'https://mtransfer.ulinkcredit.com/openapi/allinpay.balance.service/balance/getImgVerify?memberId=' + this.$route.query.token.slice(0, 6) + '&token=' + this.$route.query.token + '&timestamp=' + (new Date()).getTime()
    },
    // 发短信时先验证图片
    checkedImage() {
      var yzval = this.yanzheng2()
      console.log("yzval..................", yzval)
      yanzhenimage({ memberId: this.$route.query.token.slice(0, 6), verifyCode: this.form.agentCode, token: this.$route.query.token }).then(cdata => {
        if (cdata.code === '000000') {
          this.getyanma()
        } else {
          this.$vux.alert.show({
            title: '提示',
            content: '图片验证码错误'
          })
        }
      }).catch(cerror => {
        console.log('--------------checked image----------')
        console.dir(cerror)
        this.$vux.alert.show({
          title: '提示',
          content: '图片验证码错误'
        })
      })
    },
    // 发送短信倒计时
    countDown() {
      this.dxdisabled = true
      this.dxmsg = '60S'
      var dxcdnum = 60
      var _this = this
      var cdhandle = setInterval(function() {
        dxcdnum--
        _this.dxmsg = dxcdnum + 'S'
        if (dxcdnum <= 0) {
          clearInterval(cdhandle)
          _this.dxdisabled = false
          _this.dxmsg = '获取验证码'
        }
      }, 1000)
    },

    // 发送短信验证手机号和图片验证码
    yanzheng2() {
      debugger
      var msgcontent = '手机号错误'
      var showAlert = true
      if (this.form.mobile.length === 11 && this.form.agentCode.length === 4) {
        showAlert = false
      }
      if (this.form.agentCode.length !== 4) {
        msgcontent = '图片验证码错误'
      }
      if (showAlert) {
        this.$vux.alert.show({
          title: '提示',
          content: msgcontent
        })
      }
      return showAlert
    },

    // 注册验证
    yanzheng() {
      debugger
      var msgcontent = '手机号错误'
      var showAlert = true
      if (this.form.mobile.length === 11 && this.form.password.length > 5 && this.form.vercode.length === 6 && this.form.agentCode.length === 4 && this.checkValue) {
        showAlert = false
      }
      if (this.form.password.length < 6) {
        msgcontent = '请输入6-16数字和字母密码'
      } else if (this.form.vercode.length !== 6) {
        msgcontent = '短信验证码错误'
      } else if (this.form.agentCode.length !== 4) {
        msgcontent = '图片验证码错误'
      } else if (!this.checkValue) {
        msgcontent = '请阅读并同意协议'
      }
      if (showAlert) {
        this.$vux.alert.show({
          title: '提示',
          content: msgcontent
        })
      }
      return showAlert
    },


    /* // 图片验证码改变 changeImg() { var times = (new Date()).getTime() this.imgSrc = 'https://api.allinpaycard.com/api/h5/imgCode/generate.htm?timestamp=' + times },
     */
    // 
    versions() {
      var u = navigator.userAgent
      var app = navigator.appVersion
      this.browser.mobile = !!u.match(/AppleWebKit.*Mobile.*/) //是否为移动终端
      this.browser.webKit = u.indexOf('AppleWebKit') > -1 //苹果、谷歌内核
      this.browser.ios = u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端
      this.browser.android = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 //android终端或uc浏览器
    },
    // 密码是否可视
    changeEyeType() {
      if (this.eyeType === 'password') {
        this.eyeType = 'text'
      } else {
        this.eyeType = 'password'
      }
      this.changeEyeSrc()
    },
    // 修改眼睛图片
    changeEyeSrc() {
      let _eyesrc = '/static/img/'
      //let _eyesrc = '@/assets/'
      let eyeimg = 'eye-close.png'
      if (this.eyeType === 'text') {
        eyeimg = 'eye-open.png'
      }
      _eyesrc += eyeimg
      this.eyeSrc = _eyesrc
    },

    download() {
      this.versions()
      var locationhref = 'https://itunes.apple.com/cn/app/%E5%B0%8F%E9%80%9A%E5%B8%81%E5%92%9A/id1303624175?mt=8'
      if (this.browser.android) { // android 下载地址
        locationhref = 'http://sj.qq.com/myapp/detail.htm?apkName=com.allinpay.bidong'
      }
      window.location.href = locationhref
    }
  }

}

</script>
<style>
section .weui-cells {
  margin-top: 0.5em !important;
}

.weui-cells.vux-no-group-title:before {
  border-top-width: 0px !important;
}

a {
  color: #007ee9;
}

#guide-box {
  background: url('../assets/guide_background.png')left top no-repeat;
  background-size: 100%;
  height: 100%;
}

.vux-check-icon>.weui-icon-success:before,
.vux-check-icon>.weui-icon-success-circle:before {
  color: #007ee9 !important;
}

.weui-btn_primary {
  background-color: #007ee9 !important;
}

.weui-btn_disabled.weui-btn_primary {
  background-color: #e7e7e7 !important;
}

.app-box {
  font-size: 14px;
}

#guide_background {
  width: 100%;
}

section {
  position: fixed;
  width: 100%;
  background-color: #fff;
  width: 94%;
  margin-left: 3%;
  border-radius: 10px;
}

.fr {
  float: right;
}

.yzmimg {
  position: absolute;
  right: 0;
  width: 95px;
  z-index: 99;
  height: 38px;
  top: 45px;
}

.dx-button {
  position: absolute !important;
  right: 0;
  width: 105px !important;
  z-index: 99;
  top: 91px;
  height: 40px;
}

.weui-btn_plain-primary {
  color: #2792e4 !important;
  border: 1px solid #007ee9 !important;
}

.eyeimg {
  height: 20px;
  position: absolute;
  top: 145px;
  right: 10px;
  z-index: 99;
}

</style>
